---
title: <AuthUIProvider />
---

The `<AuthUIProvider />` wraps your application with authentication context, providing essential hooks, settings, and methods required by authentication-related components and hooks throughout your app.

## Usage

```tsx title="providers.tsx"
"use client"

import { AuthUIProvider } from '@daveyplate/better-auth-ui'
import { authClient } from '@/lib/auth-client'
import { useRouter } from 'next/navigation'
import Link from 'next/link'

export function Providers({ children }: { children: React.ReactNode }) {
  const router = useRouter()

  return (
    <AuthUIProvider
      authClient={authClient}
      navigate={router.push}
      replace={router.replace}
      onSessionChange={() => router.refresh()}
      Link={Link}
    >
      {children}
    </AuthUIProvider>
  )
}
```

## Reference

The following props can be passed to the `<AuthUIProvider />` component:

<AutoTypeTable path="../src/lib/auth-ui-provider.tsx" name="AuthUIProviderProps" />

## Example

A minimal Next.js layout file using the `AuthUIProvider`:

```tsx
"use client"

import { AuthUIProvider } from "@daveyplate/better-auth-ui"
import { authClient } from "@/lib/auth-client"
import { useRouter } from "next/navigation"
import Link from "next/link"
import Image from "next/image"

export default function RootLayout({ children }: { children: React.ReactNode }) {
  const router = useRouter()

  return (
    <html lang="en">
      <body>
        <AuthUIProvider
          authClient={authClient}
          navigate={router.push}
          replace={router.replace}
          onSessionChange={() => router.refresh()}
          social={{
            providers: ["github", "google", "facebook", "apple"]
          }}
          multiSession
          magicLink
          passkey
          avatar={{
            upload: async (file) => {
              const formData = new FormData()
              formData.append("avatar", file)

              const res = await fetch("/api/uploadAvatar", { method: "POST", body: formData })
              const { data } = await res.json()

              return data.url
            },
            delete: async (url) => {
              await fetch("/api/deleteAvatar", {
                method: "POST",
                headers: { "Content-Type": "application/json" },
                body: JSON.stringify({ url })
              })
            },
            // Custom Image component for rendering avatar images
            // Useful for CDN optimization (Cloudinary, Imgix, ImgProxy, etc.)
            Image: Image // Use Next.js Image component for avatars
          }}
          captcha={{
            provider: "google-recaptcha-v3",
            siteKey: "your-site-key",
          }}
          account={{
            basePath: "/dashboard",
            fields: ["image", "name"]
          }}
          twoFactor={["otp", "totp"]}
          Link={Link}
          localizeErrors={false}
        >
          {children}
        </AuthUIProvider>
      </body>
    </html>
  )
}
```